<div class="container">

    <div class="button">

      <div class="speaker"></div>

      <div class="curve-small">

        <svg viewBox="0 0 150 150">

          <path id="small-curve" d="M 40 30 Q 60 50 40 70" />

​

        </svg>

      </div>

      <div class="curve-large">

        <svg viewBox="0 0 100 100">

          <path id="large-curve" d="M 50 40 Q 70 60 50 80" />

        </svg>

      </div>

      <div class="mute">

        <svg viewBox="0 0 100 100">

          <path id="dark-line" d="M 50 40 L 75 65" />

          <path id="light-line" d="M 75 40 L 50 65" />

        </svg>

        <svg viewBox="0 0 100 100">

​

        </svg>

      </div>

    </div>

  </div>

</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>

<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>

/* COLORS  */

/* DIMENSIONS */

/* FONTS */

/* VARIABLES - END */

/* COMMONS - START */

.flex-center, .wrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

​

* {

  box-sizing: border-box;

  margin: 0;

}

​

/* COMMONS - END */

/* STYLES -  START */

.wrapper {

  background-color: #e0f7fa;

}

.wrapper .button {

  height: 150px;

  width: 150px;

  background-color: white;

  border-radius: 20px;

  cursor: pointer;

  box-shadow: 0px 0px 15px #b4ecf3;

  position: relative;

}

.wrapper .button:active {

  animation: click 0.1s 2 linear alternate;

}

.wrapper .button #small-curve,

.wrapper .button #dark-line {

  stroke: #52d7df;

  stroke-width: 8px;

}

.wrapper .button #large-curve,

.wrapper .button #light-line {

  stroke: #c9f1ef;

  stroke-width: 6px;

}

.wrapper .button #dark-line,

.wrapper .button #light-line {

  opacity: 0;

  stroke-width: 6px;

}

.wrapper .button .mute {

  position: absolute;

  z-index: 10;

  width: 100px;

  height: 100px;

  top: 25px;

  right: 10px;

}

.wrapper .button .curve-small,

.wrapper .button .curve-large {

  position: absolute;

  z-index: 10;

  width: 100px;

  height: 100px;

}

.wrapper .button .curve-small {

  top: 42px;

  right: -10px;

}

.wrapper .button .curve-large {

  top: 15px;

  right: -2px;

}

.wrapper .button .speaker {

  position: absolute;

  height: 70px;

  width: 70px;

  border-radius: 5px;

  border: 25px solid;

  border-color: transparent #52d7df transparent transparent;

  top: 40px;

  left: 5px;

}

.wrapper .button .speaker:after {

  content: "";

  height: 22px;

  width: 15px;

  background-color: #52d7df;

  position: absolute;

  top: 0;

  left: 8px;

  border-radius: 2px 0 0 2px;

}

​

svg path {

  fill: none;

  stroke-dasharray: 1000;

  stroke-linecap: round;

  stroke-linejoin: round;

}

​

/* STYLES - END */

/* ANIMATIONS - START */

@keyframes click {

  100% {

    transform: scale(0.9, 0.9);

  }

}

@keyframes large-curve {

  from {

    stroke-dashoffset: 1000;

  }

  to {

    stroke-dashoffset: 0;

  }

}

/* ANIMATIONS - END */

var tlMute = gsap.timeline({ paused: true});

var tlUnmute = gsap.timeline({paused: true})

var flag = true;

​

tlMute.to("#large-curve", {

  duration: 0.3,

  drawSVG: "99.9% 100%"

})

  .set("#large-curve", { opacity: 0 })

  .to("#small-curve", { duration: 0.3, drawSVG: "97% 100%" }, "-=0.15")

  .to("#small-curve", { duration: 0.2, y: -40 })

  .set("#dark-line", { drawSVG: "1%", opacity: 1 })

  .set("#small-curve", { opacity: 0 })

  .to("#dark-line", { drawSVG: "100%", duration: 0.2 })

  .set("#light-line", { drawSVG: "1%", opacity: 1, y: 30 })

  .to("#light-line", { y: 0, duration: 0.2 })

  .to("#light-line", { duration: 0.2, drawSVG: "100%" });

​

tlUnmute.set("#large-curve, #small-curve", {drawSVG: "1%"})

        .to("#large-curve", {drawSVG: "100%", duration: 0.2})

  .to("#small-curve", {duration: 0.2, drawSVG: "100%"}, "-=0.1");

​

$(".button").click(function () {

  if (flag) {

    tlMute.play();

    tlUnmute.progress(0).pause()

  } else {

    tlMute.progress(0).pause();

    tlUnmute.play();

  }

  flag = !flag;

});

​